<template>
	<view class="">
		<u-loading-page :loading="isloading"></u-loading-page>
		<view class="app" :show="!isloading">
			<view class="banner">
				<view class="userinfo u-m-b-20 u-flex-y u-flex-y-center" v-if="userinfo && userinfo.user">
					<image :src="userinfo.user.avatar" mode=""></image>
					<text>{{ userinfo.user.name }}</text>
				</view>
				<view class="logout" @click="logout">退出登录</view>
				<view class="grid-div">
					<u-grid :border="false" col="5">
						<u-grid-item @click="clickroter(baseListIndex)" v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex">
							<text>{{ IndexInfo[baseListItem.key] }}</text>
							<text class="grid-text">{{ baseListItem.title }}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<view class="grid-div">
				<view class="title"><text>经营状况</text></view>
				<view class="u-p-l-20 u-p-r-20"><u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection></view>

				<swiper :indicator-dots="true" class="swiper">
					<swiper-item>
						<u-grid :border="false">
							<u-grid-item v-for="(item, index) in swiperList" :index="index" :key="index">
								<view class="statistic_item u-flex-center u-flex-items-center u-flex-y">
									<text>{{ StatisticInfo[item.key] || 0 }}</text>
									<text class="grid-text">{{ item.title }}</text>
								</view>
							</u-grid-item>
						</u-grid>
					</swiper-item>
					<swiper-item>
						<u-grid :border="false">
							<u-grid-item v-for="(item, index) in swiperList1" :index="index" :key="index">
								<view class="statistic_item u-flex-center u-flex-items-center u-flex-y">
									<text>{{ StatisticInfo[item.key] || 0 }}</text>
									<text class="grid-text">{{ item.title }}</text>
								</view>
							</u-grid-item>
						</u-grid>
					</swiper-item>
				</swiper>
			</view>
			<view class="grid-div u-m-t-20">
				<u-grid :border="false" col="5">
					<u-grid-item customStyle="margin:20rpx 0" v-for="(item, index) in btnlist" :index="index" :key="index" @click="topage(item.path)">
						<text :class="'iconfont ' + item.icon"></text>
						<text class="grid-text">{{ item.title }}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<u-gap height="50"></u-gap>
			<u-tabbar :value="tab_id">
				<u-tabbar-item :text="item.name" :icon="item.icon" v-for="(item, i) in tabs" :key="i" @click="clicktab(item.index)"></u-tabbar-item>
				<!-- 		<u-tabbar-item text="发布商品" icon="bag" @click="clicktab"></u-tabbar-item>
				<u-tabbar-item text="订单管理" icon="file-text" @click="clicktab"></u-tabbar-item>
				<u-tabbar-item text="维权订单" icon="file-text" @click="clicktab"></u-tabbar-item> -->
			</u-tabbar>
		</view>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import {getDay} from '@/util/index.js';
import modular from '@/static/modular.json';
export default {
	data() {
		return {
			baseList: [
				{
					key: 'consignment',
					title: '待发货'
				},
				{
					key: 'consumers',
					title: '待核销'
				},
				{
					key: 'after_sales',
					title: '维权中'
				},
				{
					key: 'warehouse',
					title: '仓库中'
				},
				{
					key: 'sold_out',
					title: '已售罄'
				}
			],
			swiperList: [
				{
					key: 'avg_money',
					title: '笔单价'
				},
				{
					key: 'total_pay_order_number',
					title: '订单数'
				},
				{
					key: 'total_money',
					title: '订单金额'
				},
				{
					key: 'avg_user_money',
					title: '客单价'
				},
				{
					key: 'number',
					title: '支付人数'
				},

				{
					key: 'new_user_number',
					title: '新增用户'
				}
			],
			swiperList1: [
				{
					key: 'pv',
					title: 'pv'
				},
				{
					key: 'uv',
					title: 'uv'
				},
				{
					key: 'fission_number',
					title: '分裂人数'
				},

				{
					key: 'fission_click',
					title: '分裂点击'
				},
				{
					key: 'refund_number',
					title: '退款单数'
				},
				{
					key: 'refund_money',
					title: '退款金额'
				}
			],
			btnlist: [],
			list: ['今日', '昨日', '7日', '30日'],
			current: 0,
			IndexInfo: {},
			StatisticInfo: {},
			begin_date: '',
			end_date: '',
			isloading: true,
			tab_id: 0,
			tabs: [
				{
					name: '首页',
					icon: 'home'
				}
			],
			tablist: [
				{
					name: '发布商品',
					icon: 'bag',
					id: 3,
					index: 1,
					type: 'update'
				},
				{
					name: '订单管理',
					icon: 'file-text',
					id: 8,
					index: 2,
					type: 'read'
				},
				{
					name: '维权订单',
					icon: 'file-text',
					id: 10,
					index: 3,
					type: 'read'
				}
			]
		};
	},
	async onLoad() {
		await this.$getWx;
		this.getbtnlist();
		this.getindex();
		this.sectionChange(0);
	},
	onPullDownRefresh() {
		this.getindex();
		this.sectionChange(0);
	},
	computed: {
		...mapState({
			userinfo: state => state.$userInfo,
			RuleList: state => state.$RuleList,
			Addons: state => state.$Addons
		})
	},
	methods: {
		clicktab(e) {
			switch (e) {
				case 1:
					uni.$u.route({
						url: 'pages/product/detail'
					});
					break;
				case 2:
					uni.$u.route({
						url: 'pages/order/order'
					});
					break;
				case 3:
					uni.$u.route({
						url: 'pages/order/after'
					});
					break;
			}
		},
		clickroter(e) {
			switch (e) {
				case 0:
					if (this.RuleList.findIndex(_ => _.level == 8) > -1) {
						uni.$u.route({
							url: '/pages/order/order?tab=2'
						});
					}
					break;
				case 1:
					if (this.RuleList.findIndex(_ => _.level == 8) > -1) {
						uni.$u.route({
							url: '/pages/order/order?tab=3'
						});
					}
					break;
				case 2:
					if (this.RuleList.findIndex(_ => _.level == 10) > -1) {
						uni.$u.route({
							url: '/pages/order/after?after_status=1'
						});
					}
					break;
				case 3:
					if (this.RuleList.findIndex(_ => _.level == 3) > -1) {
						uni.$u.route({
							url: '/pages/product/product?tab=1'
						});
					}
					break;
				case 4:
					if (this.RuleList.findIndex(_ => _.level == 3) > -1) {
						uni.$u.route({
							url: '/pages/product/product?tab=2'
						});
					}
					break;
			}
		},
		getbtnlist() {
			this.btnlist = [];
			if (this.RuleList && this.RuleList.length > 0) {
				modular.forEach(a => {
					if (this.RuleList.findIndex(_ => _.level == a.id) > -1) {
						this.btnlist.push(a);
					}
				});
				this.tablist.forEach(a => {
					if (this.RuleList.findIndex(_ => _.level == a.id && _.resource == a.type) > -1) {
						this.tabs.push(a);
					}
				});
			}
		},
		topage(path) {
			uni.$u.route(path);
		},
		sectionChange(index) {
			this.current = index;

			let end_date = getDay(0);
			let begin_date = '';
			switch (index) {
				case 0:
					begin_date = getDay(0);
					break;
				case 1:
					begin_date = getDay(-1);
					break;
				case 2:
					begin_date = getDay(-7);
					break;
				case 3:
					begin_date = getDay(-30);
					break;
			}
			this.begin_date = begin_date + ' 00:00:00';
			this.end_date = end_date + ' 23:59:59';
			this.getstatistic();
		},
		getindex() {
			uni.$u.http
				.post('/shop/statistic/index', {}, {custom: {id: 1}})
				.then(res => {
					let json = res.msg;
					this.IndexInfo = json;
					uni.stopPullDownRefresh();
				})
				.catch(err => {});
		},
		logout() {
			uni.$u.http
				.post('/madmin/operation/logout', this.form, {custom: {id: 1}})
				.then(res => {
					this.$store.commit('setToken', '');
					uni.$u.route({
						url: 'pages/login/login',
						type: 'reLaunch'
					});
				})
				.catch(err => {});
		},
		getstatistic() {
			uni.$u.http
				.post('/shop/statistic/total', {begin_date: this.begin_date, end_date: this.end_date}, {custom: {id: 1}})
				.then(res => {
					let json = res.msg;
					this.StatisticInfo = json;
					this.isloading = false;
				})
				.catch(err => {});
		}
	}
};
</script>

<style lang="scss">
.app {
	min-height: 100vh;
}
.swiper {
	height: 380rpx;
}
.banner {
	position: relative;
	height: 412rpx;
	background: linear-gradient(180deg, #004fff 0%, rgba(2, 81, 255, 0) 100%);
}
.logout {
	right: 20rpx;
	color: #ffffff;
	top: 60rpx;
	font-size: 32rpx;
	position: absolute;
}
.grid-div {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 20rpx 0 20rpx 0;
	margin: 0 auto;
	.title {
		padding: 10rpx 20rpx 20rpx 20rpx;
		font-size: 36rpx;
		font-weight: bold;
	}
	.statistic_item {
		width: 162rpx;
		height: 118rpx;
		background: #f9f9f9;
		margin: 33rpx 0;
		font-size: 28rpx;
		justify-items: center;
	}
	.iconfont {
		font-size: 46rpx;
	}
}
.grid-text {
	font-size: 24rpx;
	color: #909399;
	padding: 10rpx 0 10rpx 0rpx;
	/* #ifndef APP-PLUS */
	box-sizing: border-box;
	/* #endif */
}
.userinfo {
	padding: 40rpx 20rpx;
	font-size: 36rpx;
	color: #ffffff;
	image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
}
</style>
